<template>
	<view class="container">
		<!-- 顶部选项卡 -->
		<view class="tabbar">
			<view :class="['tab', { selected: currentIndex === index }]" v-for="(item, index) in tabs" :key="index" @click="changeTab(index)">
				{{ item.title }}
			</view>
		</view>

		<!-- 阵容列表 -->
		<view class="lineup-list">
			<view class="lineup-item" v-for="(lineup, index) in lineupList" :key="index" @click="goToDetail(lineup.id)">
				<!-- 第一行 -->
				<view class="lineup-header">
					<image :src="`/static/images/icon-quality-${lineup.strength}.png`" class="strength-icon"></image>
					<view class="lineup-text">
						<text class="title">{{ lineup.title }}</text>
						<text class="subtitle">{{ lineup.subTitle }}</text>
					</view>
					<text class="details">详情></text>
				</view>

				<!-- 第二行 -->
				<scroll-view scroll-x class="heroes-row">
					<view class="hero" v-for="(hero, cIndex) in lineup.heroList" :key="cIndex">
						<view class="stars-container" v-if="hero.star === 3">
							<uni-icons class="star-icon" type="star-filled" color="#ffcc00" size="16rpx" v-for="n in hero.star" :key="n"></uni-icons>
						</view>
						<image src="/static/images/icon-carry-hero.png" class="c-icon" v-if="hero.isCore"></image>
						<image :src="hero.avatar" :class="`avatar cost-${hero.cost}`"></image>
						<view class="equip-container" v-if="hero.equip.length > 0">
							<image :src="equip" class="equip-image" v-for="(equip, eIndex) in hero.equip" :key="eIndex"></image>
						</view>
					</view>
				</scroll-view>

				<!-- 第三行 -->
				<view class="difficulty">
					<text class="difficulty-text">成型难度</text>
					<uni-icons type="star-filled" size="20rpx" color="#ffcc00" v-for="n in lineup.difficulty" :key="n"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex: 0,
				tabs: [{
						title: '首页'
					},
					{
						title: '攻略'
					},
					{
						title: '排行'
					},
					{
						title: '新闻'
					},
					{
						title: '更多'
					}
				],
				lineupList: [{
						id: 1,
						strength: 'S',
						title: '炎魔枪',
						subTitle: '强大的法术攻击队伍',
						heroList: [{
								id: 1,
								avatar: '/static/img/1.png',
								cost: 5,
								star: 1,
								isCore: 0,
								equip: ['/static/equip/2004.png', '/static/equip/2010.png']
							},
							{
								id: 2,
								avatar: '/static/img/2.png',
								cost: 3,
								star: 3,
								isCore: 1,
								equip: ['/static/equip/2017.png', '/static/equip/2020.png',
									'/static/equip/41210.png'
								]
							},
							{
								id: 3,
								avatar: '/static/img/3.png',
								cost: 1,
								star: 1,
								isCore: 0,
								equip: []
							},
							{
								id: 4,
								avatar: '/static/img/4.png',
								cost: 2,
								star: 1,
								isCore: 0,
								equip: []
							},
							{
								id: 5,
								avatar: '/static/img/5.png',
								cost: 1,
								star: 1,
								isCore: 0,
								equip: []
							},
							{
								id: 6,
								avatar: '/static/img/6.png',
								cost: 1,
								star: 1,
								isCore: 0,
								equip: []
							},
							{
								id: 7,
								avatar: '/static/img/7.png',
								cost: 3,
								star: 1,
								isCore: 0,
								equip: []
							},
							{
								id: 8,
								avatar: '/static/img/8.png',
								cost: 1,
								star: 3,
								isCore: 0,
								equip: []
							},
							{
								id: 9,
								avatar: '/static/img/9.png',
								cost: 4,
								star: 1,
								isCore: 0,
								equip: []
							},
							{
								id: 10,
								avatar: '/static/img/2.png',
								cost: 4,
								star: 1,
								isCore: 0,
								equip: []
							},
							// 更多棋子...
						],
						difficulty: 5
					},
					{
						id: 2,
						strength: 'A',
						title: '8次元术士',
						subTitle: '拥有多种控制技能的队伍',
						heroList: [{
								id: 1,
								avatar: '/static/img/4.png',
								cost: 5,
								star: 1,
								isCore: 0,
								equip: []
							},
							{
								id: 2,
								avatar: '/static/img/6.png',
								cost: 3,
								star: 3,
								isCore: 0,
								equip: []
							},
							{
								id: 3,
								avatar: '/static/img/3.png',
								cost: 1,
								star: 1,
								isCore: 0,
								equip: ['/static/equip/2004.png', '/static/equip/2010.png']
							},
							{
								id: 4,
								avatar: '/static/img/1.png',
								cost: 2,
								star: 1,
								isCore: 0,
								equip: []
							},
							{
								id: 5,
								avatar: '/static/img/5.png',
								cost: 1,
								star: 1,
								isCore: 1,
								equip: ['/static/equip/2017.png', '/static/equip/2020.png', '/static/equip/41210.png']
							},
							{
								id: 6,
								avatar: '/static/img/2.png',
								cost: 1,
								star: 1,
								isCore: 0,
								equip: []
							},
							{
								id: 7,
								avatar: '/static/img/7.png',
								cost: 3,
								star: 1,
								isCore: 0,
								equip: []
							},
							{
								id: 8,
								avatar: '/static/img/8.png',
								cost: 1,
								star: 3,
								isCore: 0,
								equip: []
							},
							{
								id: 9,
								avatar: '/static/img/9.png',
								cost: 4,
								star: 1,
								isCore: 0,
								equip: []
							},
							{
								id: 10,
								avatar: '/static/img/5.png',
								cost: 4,
								star: 1,
								isCore: 0,
								equip: []
							},
							{
								id: 11,
								avatar: '/static/img/8.png',
								cost: 4,
								star: 1,
								isCore: 0,
								equip: []
							},
							// 更多棋子...
						],
						difficulty: 3
					}
				],
			};
		},
		methods: {
			changeTab(index) {
				this.currentIndex = index;
			},
			goToDetail(id) {
				uni.navigateTo({
					url: `/pages/index/detail?id=${id}`
				});
			}
		}
	};
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		padding: 10rpx;
		box-sizing: border-box;
		min-height: 100vh;
		background-color: #f8f8f8;
	}

	.tabbar {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 10rpx 0;
		border-bottom: 1rpx solid #ddd;
		background-color: #fff;
	}

	.tabbar .tab {
		padding: 10rpx;
		font-size: 32rpx;
		cursor: pointer;
	}

	.tabbar .selected {
		color: #007aff;
		border-bottom: 2rpx solid #007aff;
	}

	.lineup-list {
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
		padding: 0;
	}

	.lineup-item {
		display: flex;
		flex-direction: column;
		padding: 10rpx;
		border-radius: 10rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.lineup-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.lineup-header .strength-icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.lineup-header .lineup-text {
		flex-grow: 1;
	}

	.lineup-header .title {
		text-align: left;
		font-size: 32rpx;
		font-weight: bold;
	}

	.lineup-header .subtitle {
		text-align: left;
		font-size: 24rpx;
		color: #666;
		margin-left: 10rpx;
	}

	.lineup-header .details {
		flex-shrink: 0;
		text-align: right;
		font-size: 24rpx;
	}

	.heroes-row {
		display: flex;
		overflow-x: auto;
		white-space: nowrap;
		margin-top: 10rpx;
		padding: 0 8rpx;
	}

	.hero {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		width: 60rpx;
		height: 80rpx;
		position: relative;
		overflow: visible;
	}

	.hero:first-child {
		margin-left: 2rpx;
	}

	.hero:not(:first-child) {
		margin-left: 10rpx;
	}

	.stars-container {
		display: flex;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		justify-content: center;
		align-items: center;
		gap: 2rpx;
	}

	.star-icon {
		margin-right: 2rpx;
		width: 16rpx;
		height: 16rpx;
		z-index: 2;
	}

	.c-icon {
		position: absolute;
		top: 50%;
		left: -8rpx;
		transform: translateY(-50%);
		width: 20rpx;
		height: 20rpx;
		z-index: 2;
		margin-top: 5rpx;
	}

	.avatar {
		width: 60rpx;
		height: 60rpx;
		position: relative;
		margin-top: 20rpx;
		border: 2rpx solid transparent;
	}

	.cost-1.avatar {
		border-color: #999;
	}

	.cost-2.avatar {
		border-color: #5fcc29;
	}

	.cost-3.avatar {
		border-color: #297acc;
	}

	.cost-4.avatar {
		border-color: #cc29cc;
	}

	.cost-5.avatar {
		border-color: #cca329;
	}

	.equip-container {
		position: absolute;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		gap: 2rpx;
	}

	.equip-image {
		width: 20rpx;
		height: 20rpx;
		position: relative;
		z-index: 2;
	}

	.difficulty {
		display: flex;
		align-items: center;
		margin-top: 10rpx;
	}

	.difficulty .difficulty-text {
		font-size: 24rpx;
		color: #666;
		margin-right: 10rpx;
	}
</style>